<template>
  <div>
    <nav-header></nav-header>
    <nav-bread>
        <span slot='bread'>Goods</span>
        <!-- <span slot='B'>News</span> -->
    </nav-bread>
    <div class="accessory-result-page accessory-page">
      <div class="container">
        <div class="filter-nav">
          <span class="sortby">Sort by:</span>
          <a href="javascript:void(0)" class="default" v-bind:class="{'cur':sortFlag}" @click="sortGoods">Default</a>
          <a href="javascript:void(0)" class="price" v-bind:class="{'cur':!sortFlag}" @click="sortGoods">Price
            <svg class="icon icon-arrow-short"><use xlink:href="#icon-arrow-short"></use></svg>
          </a>
          <a href="javascript:void(0)" class="filterby stopPop" @click="showFilterPop">Filter by</a>
        </div>
        <div class="accessory-result">
          <!-- filter -->
          <div class="filter stopPop" id="filter" v-bind:class="{'filterby-show': filterBy}">
            <dl class="filter-price">
              <dt>Price:</dt>
              <dd><a href="javascript:void(0)" v-bind:class="{'cur':priceChecked=='all'}" @click="setPriceFilter('all')">All</a></dd>
              <dd v-for="(price, index) in priceFilter" :key="index">
                <a href="javascript:;" v-bind:class="{'cur':priceChecked==index}" @click="setPriceFilter(index)">{{ price.startPrice }} - {{ price.endPrice }}</a>
              </dd>
            </dl>
          </div>

          <!-- search result accessories list -->
          <div class="accessory-list-wrap">
            <div class="accessory-list col-4">
              <ul>
                <li v-for="(item, index) in goodsList" :key="index">
                  <div class="pic">
                    <!-- <a href="#"><img v-bind:src="'/static/' + item.productImg" alt=""></a> -->
                    <a href="#"><img v-lazy="'/static/' + item.productImage" alt=""></a>
                  </div>
                  <div class="main">
                    <div class="name">{{ item.productName }}</div>
                    <div class="price">{{ item.salePrice }}</div>
                    <div class="btn-area">
                      <a href="javascript:;" class="btn btn--m" @click='addCart(item.productId)'>加入购物车</a>
                    </div>
                  </div>
                </li>
              </ul>
              <div class="load-more" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="30" infinite-scroll-immediate-check="false">
                <img src="./../assets/loading-spinning-bubbles.svg" v-show="loading" alt="">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <modal :mdShow="mdShow" v-on:close="closeModal">
      <p slot="message">
      请先登录,否则无法加入到购物车中!
      </p>
      <div slot="btnGroup">
          <a class="btn btn--m" href="javascript:;" @click="mdShow = false">关闭</a>
      </div>
    </modal>

    <modal :mdShow="mdShowCart" v-on:close="closeModal">
      <p slot="message">
        <svg class="icon-status-ok">
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-status-ok"></use>
        </svg>
        <span>加入购物车成!</span>
      </p>
      <div slot="btnGroup">
        <a class="btn btn--m" href="javascript:;" @click="mdShowCart = false">继续购物</a>
        <router-link class="btn btn--m btn--red" href="javascript:;" to="/cart">查看购物车</router-link>
      </div>
    </modal>
    <nav-footer></nav-footer>
  </div>
</template>

<style>
.load-more {
  height: 100px;
  line-height: 100px;
  text-align: center;
}
</style>


<script>
import './../assets/css/base.css'
import './../assets/css/product.css'
import './../assets/css/login.css'

import NavHeader from '@/components/NavHeader'
import NavFooter from '@/components/NavFooter'
import NavBread from '@/components/NavBread'
import Modal from './../components/Modal'
import axios from 'axios'

axios.defaults.baseURL = '/api';
export default {
  data() {
    return {
      msg: 'helo',
      goodsList: [],
      sortFlag: true,
      page: 1,
      priceChecked: 'all',
      filterBy: false,
      coverFlag: false,
      busy: true,
      loading: true,
      mdShow: false,
      mdShowCart: false,
      priceFilter:[
        {
          startPrice: '0.00',
          endPrice: '500.00'
        },
        {
          startPrice: '500.00',
          endPrice: '1000.00'
        },
        {
          startPrice: '1000.00',
          endPrice: '1500.00'
        },
        {
          startPrice: '1500.00',
          endPrice: '5000.00'
        },
      ]
    }
  },
  components: {
    NavHeader, NavFooter, NavBread, Modal
  },
  mounted () {
    this.getGoodsList()
  },
  methods: {
    getGoodsList(flag = false) {
      let params = {
        page: this.page,
        sort: this.sortFlag ? 1 : -1,
        priceLevel: this.priceChecked
      };

      let async1 = rs => {
        let rsData = rs.data;
        if(rsData.status == '0') {
            if(flag) {
              // 滚动追加的
              this.goodsList = this.goodsList.concat(rsData.result.list);

              if(rsData.result.count == 0) {
                // 没有数据就禁用滚动
                this.busy = true;
              } else {
                this.busy = false;
              }
            } else {
              this.goodsList = rsData.result.list;
              this.busy = false;
            }

            return Promise.resolve();
        } else {
          this.goodsList = [];
          return Promise.reject();
        }
      };

      this.loading = true;
      axios.get("/goods", {
        params
      }).then(rs => {
        return async1(rs);
      }).then(() => {
        this.loading = false;
      });
    },
    showFilterPop() {
      this.filterBy = true;
      this.coverFlag = true;
    },
    closePop() {
      this.filterBy = false;
      this.coverFlag = false;
    },
    setPriceFilter(index) {
      this.priceChecked = index;
      this.page = 1;
      this.getGoodsList();
      this.closePop();
    },
    sortGoods() {
        this.sortFlag = !this.sortFlag;
        this.page = 1;
        this.getGoodsList();
    },
    loadMore() {
      // 禁用
      this.busy = true;
      console.log('loadmore')
      setTimeout(() => {
        this.page++;
        this.getGoodsList(true);
      }, 800);
    },
    addCart(productId) {
      axios.post('/goods/addCart', {
        productId
      }).then(rs => {
        if(rs.data.status == '0') {
          this.$store.commit('updateCartCount', 1);
          // alert('success');

          this.mdShowCart = true;
        } else {
          // alert('error');
          this.mdShow = true;
        }
      })
    },
    closeModal(){
      this.mdShow = false;
      this.mdShowCart = false;
    },
  }
}
</script>
